import { Button, Image, Modal, SearchBar, Tabs, Toast, } from "antd-mobile"
import { RightOutline, } from 'antd-mobile-icons'
import './index.scss'
import { useEffect, useMemo, useState, } from "react";
import { Loading } from "../../layouts/MainLayout/components/loading";
import dayjs from "dayjs";
import { useDispatch, useSelector } from "react-redux";
import type { AppDispatch, RootState } from "../../store";
import { clearOrderError, getOrder, selectOrderList } from "../../store/modules/order";
import { useNavigate } from "react-router-dom";
import type { orderDataArr } from "../../api/order";

const Order = () => {
    // const [orderList, setOrderList] = useState<orderDataArr[]>()
    // const [loading, setLoading] = useState<boolean>(false)
    const dispatch = useDispatch<AppDispatch>()
    const navigate = useNavigate()
    const { orderList, error, loading } = useSelector((state: RootState) => {
        return state.order
    })
    const [tabStatus, setTabStatus] = useState(0)
    const list = useMemo(() => {
      if(tabStatus===0){
        return orderList
      }
       return orderList?.filter(item => item.status === tabStatus) || [];
    }, [orderList, tabStatus])

    const statusTabs = [
        { key: 0, title: '全部' },
        { key: 1, title: '待付款' },
        { key: 2, title: '待收货' },
        { key: 3, title: '待评价' },
        { key: 4, title: '退款' },
    ];
    useEffect(() => {
        dispatch(getOrder())
    }, [dispatch])

    useEffect(() => {
        if (error) {
            Toast.show({
                content: error
            })
            dispatch(clearOrderError())
        }
    }, [error, dispatch])


    //删除订单
    const delOrder = () => {
        Modal.confirm({
            // cancelText: '取消',
            confirmText: '确认删除订单',
            onConfirm: () => {
                Toast.show('删除成功！')
            }
        })
    }
    const stateBtn = (state: number) => {
        switch (state) {
            case 1:
                return <Button >去付款</Button>
            case 2:
                return <Button color="primary">确认收货</Button>
            case 3:
                return <Button color="success">去评价</Button>
            case 4:
                return <div className="refund">已退款</div>
            default:
                break;
        }
    }
    const navOrderDetails = (item: orderDataArr) => {
        //    console.log(item)
        dispatch(selectOrderList(item))
        navigate(`/orderDetails`)

    }
    const changeTabs = (e: string) => {
        console.log(e)
        setTabStatus(parseInt(e))
    }

    const orderState = (state: number) => {
        switch (state) {
            case 1:
                return '待付款'
            case 2:
                return '已付款'

            default:
                break;
        }
    }

    if (loading) {
        return <Loading />
    }
    
    if (!orderList || !list) {
        return <div>
            加载失败
        </div>
    }
    return <div className="order">
        <div className="search">
            <SearchBar placeholder="搜索我的订单"></SearchBar>
        </div>
        <div className="tabs">
            <Tabs defaultActiveKey='0' onChange={changeTabs}>
                {statusTabs.map(item => (
                    <Tabs.Tab title={item.title} key={item.key} >
                    </Tabs.Tab>
                ))}
            </Tabs>
        </div>
        <div className="order_orderList">

            {
                list.map(item => (
                    <div className="orderItem" key={item._id}>
                        <div className="head1">
                            <div className="shopAvatar">
                                {/* <Image  src={item.shopAvatar} style={{ borderRadius: '100%' }} width={35} height={35} /> */}
                                <span>{item.shops_title}</span>
                                <RightOutline fontSize={20} />
                            </div>
                            <div className="orderState">{orderState(item.status)}</div>
                        </div>

                        <div className="middle">
                            <div className="shopPicture">
                                <Image fit="cover" src={item.orderItemList_id[0].orderItemList[0].imgUrl} width={70} height={70} style={{ borderRadius: '10px' }} />
                                <div className="product">
                                    <span>{item.orderItemList_id[0].orderItemList[0].name}</span>
                                    <span>{dayjs(item.create_time).format('YYYY-MM-DD HH:mm:ss')}</span>
                                </div>
                            </div>
                            <div className="price">
                                {item.total_fee}￥
                                <div style={{ fontWeight: 100, fontSize: '14px' }}>
                                    共{item.count}件
                                </div>
                            </div>
                        </div>

                        <div className="order_foot">
                            <div onClick={() => navOrderDetails(item)}>
                                {
                                    stateBtn(item.status)
                                }
                            </div>


                        </div>
                    </div>
                ))
            }

        </div>
    </div>
}

export default Order